<template>
  <el-container class="full_box">
    <el-header>
      <!--科目选择器-->
      <el-select v-model="selectSubject" filterable clearable placeholder="科目">
        <el-option
            v-for="item in subjectList"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>
      <el-select v-model="selectDate" clearable placeholder="日期" class="set_left_margin">
        <el-option
            v-for="item in dateList"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>
    </el-header>

    <el-main>
      <!--  根据相关选择器来显示相关数据 -->
      <el-table
          :data="subjectGrades"
          border
          height="100%"
          style="width: 100%">
        <el-table-column
            prop="subject"
            label="科目"
            width="200">
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            sortable
            width="200">
        </el-table-column>
        <el-table-column
            prop="grade"
            sortable
            label="成绩 ">
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
//测试数据
//import {testData} from "@/js/testConfig.mjs";
import {getDataWithDate, getDataWithSubject} from "@/js/util.mjs";

export default {
  name: "SelectGrade",
  data() {
    return {
      //元数据
      selectSubject: '',
      selectDate: ''
    }
  },
  computed: {

    subjectGrades: function () {
      return getDataWithSubject(getDataWithDate(this.sourceData, this.selectDate), this.selectSubject)
    },
    //科目的列表
    subjectList: function () {
      return this.metaData.subjectList
    },
    //所有成绩
    sourceData: function () {
      return this.metaData.grades
    },
    //日期列表
    dateList: function () {
      return this.metaData.dateList
    },
    metaData:function (){
      return this.$store.state.student_baseData
    }
  }
}
</script>

<style scoped>
.set_left_margin{
  margin-left: 20px;
}
</style>